<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="largeVideo" controls width="100%"></video>
    <input type="text">
    <button onclick="play()">播放</button>
</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    const video = document.getElementById('largeVideo');



    function play() {
        const m3u8Url = document.querySelector('input').value;
        console.log(m3u8Url);
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(m3u8Url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                video.play(); // 解析完成后自动播放
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Safari原生支持HLS，直接赋值URL
            video.src = m3u8Url;
            video.addEventListener('loadedmetadata', () => {
                video.play();
            });
        }
    }
</script>